<template>
    <div id="cdc-run-monitor">
        <div class="head">
            <h1 class="title">CDC运行监听</h1>
        </div>
        <div class="content status-box">
            <el-card>
                <h3 class="title">
                    <i class="circle-icon"></i>
                    <span>CDC运行状态</span>
                </h3>
                <div class="title-right">
                    <el-tooltip content="刷新" placement="bottom" effect="light" popper-class="monitor-tooltip">
                        <i class="el-icon-refresh-right" @click="queryCdcStatus"></i>
                    </el-tooltip>
                </div>
                <div class="flow-path-img">
                    <div class="flex-2">
                        <div class="flex-row-100">
                            <img src="./images/u816.gif" class="gif-size" alt="" />
                        </div>
                        <span style="text-align: center"> DSG </span>
                    </div>
                    <div class="flex-1">
                        <div class="line" v-if="cdcStatus.outerToKafka">
                            <img :src="imgUrl" class="con arrows2" alt="" />
                        </div>
                        <div class="line-err" v-else>
                            <div class="arrows2"></div>
                        </div>
                    </div>

                    <div class="flex-2">
                        <div class="flex-row-100">
                            <img src="./images/u847.gif" class="gif-size" alt="" />
                        </div>
                        <span style="text-align: center"> Kafka </span>
                    </div>
                    <div class="flex-1">
                        <div class="line" v-if="cdcStatus.kafkaToRisk">
                            <img :src="imgUrl" class="con arrows2" alt="" />
                        </div>
                        <div class="line-err" v-else>
                            <div class="arrows2"></div>
                        </div>
                    </div>

                    <div class="flex-2">
                        <div class="flex-row-100">
                            <img src="./images/u840.gif" class="gif-size" alt="" />
                        </div>
                        <span style="text-align: center"> Risk </span>
                    </div>
                </div>
            </el-card>
        </div>
        <div class="content trend-box">
            <el-card>
                <h3 class="title">
                    <i class="circle-icon"></i>
                    <span>监听消息走势</span>
                </h3>
                <div class="title-right">
                    <div class="total-num">
                        {{ `监听成功总数：${totalSuccess} ` }}
                    </div>
                    <div class="total-num">
                        {{ `监听失败总数：${totalFailed}` }}
                    </div>

                    <el-date-picker
                        style="width: 220px; z-index: 10; margin-right: 10px"
                        v-model="date"
                        size="mini"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyyMMdd"
                        @change="handleDateChange"
                        :clearable="false"
                        :picker-options="setEndTime"
                    >
                    </el-date-picker>
                    <el-select v-model="queryForm.unit" placeholder="请选择" size="mini" style="width: 65px; z-index: 10" @change="handleUnitChange">
                        <el-option v-for="item in unitData" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                    <el-button size="mini" type="primary" class="export-button" @click="handleExportEchart">导出图表</el-button>
                    <el-tooltip content="刷新" placement="bottom" effect="light" popper-class="monitor-tooltip">
                        <i style="z-index: 10" class="el-icon-refresh-right" @click="handleRefresh('line')"></i>
                    </el-tooltip>
                </div>
                <div style="height: 100%"><LineChart ref="LineChart" :data="lineChartData" :queryForm="queryForm" /></div>
            </el-card>
        </div>
        <div class="content table-distribution-box">
            <el-card>
                <h3 class="title">
                    <i class="circle-icon"></i>
                    <span>监听表分布</span>
                </h3>
                <div class="title-right">
                    <el-tooltip content="刷新" placement="bottom" effect="light" popper-class="monitor-tooltip">
                        <i style="z-index: 10" class="el-icon-refresh-right" @click="handleRefresh('bar')"></i>
                    </el-tooltip>
                </div>
                <div style="height: 100%"><BarChart ref="BarChart" :data="barChartData" :queryForm="queryForm" /></div>
            </el-card>
        </div>
        <div class="content detail-box">
            <el-card>
                <h3 class="title">
                    <i class="circle-icon"></i>
                    <span>监听数据详情</span>
                </h3>
                <div class="title-right">
                    <el-select
                        size="mini"
                        v-model="tableNames"
                        filterable
                        multiple
                        collapse-tags
                        placeholder="请选择"
                        @change="handleTableNamesChange"
                    >
                        <el-option
                            v-for="(item, index) in listeningTableData"
                            :key="item.dictKey + index"
                            :label="item.dictKey + ' ' + item.dictKeyName"
                            :value="item.dictKey"
                        >
                        </el-option>
                    </el-select>
                    <i class="el-icon-full-screen" @click="handleFullScreen"></i>

                    <el-tooltip content="刷新" placement="bottom" effect="light" popper-class="monitor-tooltip">
                        <i class="el-icon-refresh-right" @click="queryDetail"></i>
                    </el-tooltip>
                </div>
                <!-- <div> -->
                <div class="table-box">
                    <div class="table">
                        <vxe-table
                            border
                            :cell-style="getCellStyle"
                            :row-config="{ isHover: true }"
                            :sort-config="{
                                defaultSort: { field: sortProp, order: sortOrder, orders: ['desc', 'asc', null] },
                                remote: true,
                            }"
                            stripe
                            :filter-config="{ remote: true }"
                            @filter-change="handleFilter"
                            @sort-change="handleSort"
                            :data="tableDetailMsg.returnData.data"
                            show-header-overflow
                            height="100%"
                            header-align="center"
                            :key="columnsKey"
                            auto-resize
                            :tooltip-config="{ enterable: true }"
                        >
                            <vxe-column
                                v-for="item in tableDetailMsg.title"
                                :field="item.val"
                                :title="item.name"
                                :key="item.val"
                                :filters="item.filters"
                                :min-width="item.minWidth || '90px'"
                                show-overflow="tooltip"
                                sortable
                            >
                                <template #filter="{ $panel, column }" v-if="item.val !== 'monitorResultType' && item.val !== 'dateChangeType'">
                                    <div>
                                        <el-input
                                            ref="searchInput"
                                            class="my-input"
                                            type="type"
                                            v-for="(option, index) in column.filters"
                                            :key="index"
                                            v-model="option.data"
                                            @input="$panel.changeOption($event, !!option.data, option)"
                                        />
                                    </div>
                                </template>
                                <template slot-scope="scope">
                                    <span v-if="item.type == 'func'" :style="getStyle(item.val, scope.row[item.val])">
                                        {{ item.funcBody(scope.row[item.val], scope.row) || '--' }}
                                    </span>
                                    <!-- <span v-else-if="['kafkaValue', 'logInfo'].includes(item.val)">
                                        <el-tooltip placement="top" popper-class="atooltip">
                                            <template slot="content" style="padding: 0 10px 10px 0">
                                                <span class="test">
                                                    {{ scope.row[item.val] }}
                                                </span>
                                            </template>
                                            <span class="atooltip">{{ scope.row[item.val] || '--' }}</span>
                                        </el-tooltip>
                                    </span> -->
                                    <span v-else>
                                        {{
                                            scope.row[item.val] === 0 || (scope.row[item.val] && (scope.row[item.val] + '').trim())
                                                ? scope.row[item.val]
                                                : '--'
                                        }}
                                    </span>
                                </template>
                            </vxe-column>
                        </vxe-table>
                    </div>
                    <RiskPagination :paging="pages" @page-change="pageChange"></RiskPagination>

                    <!-- <risk-table
                        :msg="tableDetailMsg"
                        @handleSort="handleSort(arguments)"
                        @handleFilter="handleFilter"
                        @getList="queryDetailList"
                    ></risk-table> -->
                </div>
                <!-- </div> -->

                <!-- 数据详情弹框 -->
                <TableDetail
                    v-if="detailDialog"
                    :detailDialog="detailDialog"
                    :info="info"
                    :queryForm="{ ...queryForm, ...form }"
                    :tableNames="tableNames"
                    @closeDialog="closeDialog"
                ></TableDetail>
            </el-card>
        </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator';
import BarChart from './cdc-run-monitor/bar-chart.vue';
import LineChart from './cdc-run-monitor/line-chart.vue';
import RiskTable from '@/common/components/risk-table.vue';
import TableDetail from './cdc-run-monitor/table-detail.vue';
import moment from 'moment';
import {
    getDetail,
    getMonitorCdcStatus,
    getMonitorCdcTrend,
    getMonitorCdcTrendDetail,
    getTableData,
    getTableDistribute,
    exportMonitorCdcTrend,
} from './api/cdc';
import { downLoadFile, downLoadFileFormData } from '@/utils/request';
import { dateFormat, timeFormat } from '@/utils/tools';
import RiskPagination from '@/common/components/risk-pagination.vue';

const dateChangeTypes = {
    I: '新增',
    U: '修改',
    D: '删除',
};

@Component({
    name: 'CDCRunMonitor',
    components: { BarChart, LineChart, RiskTable, TableDetail, RiskPagination },
})
export default class CDCRunMonitor extends Vue {
    dateFormat = dateFormat;
    timeFormat = timeFormat;
    date: any = '';
    tableName: string = '';
    imgUrl: string =
        '';

    title: string = '监听数据详情';
    resultPojo = { '0': '成功', '1': '失败', '2': '过滤' };

    tableDetailMsg: any = {
        returnData: { data: [], total: 0 },
        dataKey: 'data',
        title: [
            { name: '数据源', val: 'dataSource', sortable: true, search: true, filters: [{ data: '' }], align: 'center' },
            { name: '表名', val: 'tableName', sortable: true, search: true, filters: [{ data: '' }] },
            { name: '消息内容', val: 'kafkaValue', sortable: true },
            {
                name: '监听结果',
                val: 'monitorResultType',
                sortable: true,
                search: true,
                filters: [
                    { label: '成功', value: '0' },
                    { label: '失败', value: '1' },
                    { label: '过滤', value: '2' },
                ],
                align: 'center',
                type: 'func',
                funcBody: value => this.resultPojo[value],
            },
            { name: '日志信息', val: 'logInfo', sortable: true, search: true, filters: [{ data: '' }] },
            { name: '监听耗时(ms)', val: 'finishTimes', sortable: true, align: 'right' },
            {
                name: '监听时间',
                val: 'receiveDate',
                sortable: true,
                align: 'center',
                type: 'func',
                funcBody: (value, row) => dateFormat(row['receiveDate']) + ' ' + timeFormat(row['receiveTime']) || '--',
            },
            {
                name: '消息变动类型',
                val: 'dateChangeType',
                sortable: true,
                search: true,
                filters: [
                    { label: '新增', value: 'I' },
                    { label: '修改', value: 'U' },
                    { label: '删除', value: 'D' },
                ],
                align: 'center',
                type: 'func',
                funcBody: value => dateChangeTypes[value],
            },
            { name: '消息行主键', val: 'primaryKeys', sortable: true, search: true, filters: [{ data: '' }], align: 'center' },
        ],
        height: '100%',
        // 隐藏页码
        hidePage: false,
        checked: { on: false, option: false },
    };

    unit: string = '1';
    unitData: any[] = []; // 可选单位数据
    listeningTableData: any[] = []; // 监听的表
    tableNames: any[] = []; // 选中的表

    // 限制选择近1年内(365天)日期
    setEndTime: any = {
        disabledDate: time => {
            const day = 360 * 24 * 3600 * 1000; // 31536000000
            // 返回小于当前日期并近一年内的日期
            return time.getTime() > Date.now() || time.getTime() < Date.now() - 8.64e7 - day;
        },
    };

    detailDialog: boolean = false;
    info: any = {};
    chartInstanceArr: any[] = [];
    chartComponent: string[] = ['LineChart', 'BarChart'];
    // cdc状态
    cdcStatus = {
        kafkaToRisk: false,
        outerToKafka: false,
    };
    // 查询表单
    queryForm: any = {
        dataSource: '',
        logInfo: '',
        monitorResultType: [],
        sort: '',
        tableName: '',
        tableNames: [],
        endDate: moment().format('yyyyMMDD'),
        endTime: '',
        paging: {
            currentPage: 1,
            pageSize: 25,
        },

        sourceTable: '',
        startDate: moment().format('yyyyMMDD'),
        startTime: '',
        unit: 'hour',
        xdate: '',
        dateChangeType: [],
        primaryKeys: '',
    };
    totalSuccess: string = ''; // 成功总数
    totalFailed: string = ''; // 失败总数
    // 折线图数据
    lineChartData: any = {
        data: [],
        xData: [],
    };
    // 柱状图数据
    barChartData: any = {
        data: [],
        xData: [],
    };

    // 实际排序参数
    sortObj = {
        dataSource: 'C_DATA_SOURCE',
        tableName: 'C_TABLE_NAME',
        kafkaValue: 'LENGTH(C_KAFKA_VALUE)',
        monitorResultType: 'C_MONITOR_RESULT_TYPE',
        logInfo: 'LENGTH(C_LOG_INFO)',
        finishTimes: 'D_FINISH_TIMES',
        // receiveDate: '',
        dateChangeType: 'C_DATA_CHANGE_TYPE',
        primaryKeys: 'C_PRIMARY_KEYS',
    };

    sortProp: string = 'modifyDateTime';
    sortOrder: string = 'desc'; // 排序方式
    Timer: any = null;
    pages = {
        total: 0,
        pageSize: 25,
        currentPage: 1,
    };
    iconDom = null;
    checkFiltersIndex: any[] = [2, 4]; // 复选框筛选

    form = {
        dataSource: '',
        tableName: '',
        logInfo: '',
        monitorResultType: [],
    };

    mounted() {
        let todayDate = moment().format('yyyyMMDD');
        this.date = [todayDate, todayDate];
        this.unitData = [
            { label: '时', value: 'hour' },
            { label: '日', value: 'day' },
        ];
        this.unit = '1';
        this.queryCdcStatus();
        this.queryTableData();
        this.getCdcTrend();
        this.getTableDistributeData();
        this.queryDetail();
        this.setT();
        this.chartComponent.forEach(ele => {
            this.chartInstanceArr.push((this.$refs[ele] as any).chartInstance);
        });
        window.addEventListener('resize', this.screenAdapter);
        this.changeTable();
    }
    setT() {
        this.Timer = setInterval(() => {
            this.queryCdcStatus('autoRefresh');
            this.getCdcTrend('autoRefresh');
            this.getTableDistributeData('autoRefresh');
            this.queryDetail('autoRefresh');
        }, 60000);
    }

    // 改变筛选按钮
    changeTable() {
        this.$nextTick(() => {
            if (!this.iconDom) {
                let dom = document.querySelector('.detail-box');
                this.iconDom = dom.querySelectorAll('.vxe-icon--funnel');
                for (let i = 0; i < this.iconDom.length; i++) {
                    if (!this.checkFiltersIndex.includes(i)) {
                        this.iconDom[i].className = 'vxe-filter--btn el-icon-search';
                    }
                }
            }
        });
    }

    // 获取cdc运行状态
    queryCdcStatus(operateType?: string) {
        getMonitorCdcStatus(operateType)
            .then((res: any) => {
                this.cdcStatus = res;
            })
            .catch(() => {
                this.cdcStatus.kafkaToRisk = false;
                this.cdcStatus.outerToKafka = false;
            });
    }

    // 手动刷新图表
    handleRefresh(type: any) {
        if (type == 'line') {
            (this.$refs['LineChart'] as any).dispose();
            this.getCdcTrend();
        } else {
            (this.$refs['BarChart'] as any).dispose();
            this.getTableDistributeData();
        }
        this.chartInstanceArr = [];
        this.chartComponent.forEach(ele => {
            this.chartInstanceArr.push((this.$refs[ele] as any).chartInstance);
        });
    }

    // 获取监听消息走势
    getCdcTrend(operateType?: string) {
        getMonitorCdcTrend({ ...this.queryForm, ...this.form }, operateType)
            .then((res: any) => {
                this.lineChartData = res?.brokenLineChart;
                if (this.queryForm.unit == 'hour') {
                    this.lineChartData.xData = this.lineChartData.xData.map(ele => moment(ele, 'HHmm').format('HH:mm'));
                } else if (this.queryForm.unit == 'day') {
                    this.lineChartData.xData = this.lineChartData.xData.map(ele => ele + '日');
                } else if (this.queryForm.unit == 'month') {
                    this.lineChartData.xData = this.lineChartData.xData.map(ele => ele + '月');
                } else if (this.queryForm.unit == 'year') {
                    this.lineChartData.xData = this.lineChartData.xData.map(ele => ele + '年');
                }
                this.totalSuccess = res?.successNum;
                this.totalFailed = res?.failedNum;
            })
            .catch(() => {});
    }

    // 获取表分布
    getTableDistributeData(operateType?: string) {
        getTableDistribute({ ...this.queryForm, ...this.form }, operateType)
            .then((res: any) => {
                if (res) {
                    this.barChartData = res;
                }
            })
            .catch(() => {
                // this.barChartData = [];
            });
    }

    // 获取监听表数据
    queryTableData() {
        getTableData()
            .then((res: any) => {
                this.listeningTableData = res;
            })
            .catch(() => {
                this.listeningTableData = [];
            });
    }

    // 获取监听数据详情
    queryDetail(operateType?: string) {
        getDetail({ ...this.queryForm, tableNames: this.tableNames }, operateType)
            .then((res: any) => {
                //  this.tableData = res.pageResponse.list;
                this.tableDetailMsg.returnData.data = res.pageResponse.list;
                this.tableDetailMsg.returnData.total = res.pageResponse.total;
                this.pages.total = res.pageResponse.total;
            })
            .catch(() => {});
    }

    queryDetailList(pages: any) {
        this.queryForm.paging = pages;
        this.queryDetail();
    }

    // 自适应
    screenAdapter() {
        setTimeout(() => {
            const titleFontSize = ((this.$refs.LineChart as any).offsetWidth / 100) * 5.6;
            // 分辨率变化图表配置
            const adapterOption = {
                axisLabel: {
                    textStyle: {
                        fontSize: titleFontSize,
                    },
                },
            };
            this.chartInstanceArr.forEach(ele => {
                ele.setOption(adapterOption);
                ele.resize();
            });
        }, 200);
    }

    handleSort(column: any) {
        this.pages.currentPage = 1;
        this.queryForm.paging.currentPage = 1;
        this.queryForm.paging.pageSize = this.pages.pageSize;
        this.sortProp = column.property;
        this.sortOrder = column.order;
        const sortType = column.order == 'asc' ? 'ASC' : column.order == 'desc' ? 'DESC' : '';
        let sort = '';
        if (sortType) {
            sort = this.handleSortField(column.property, sortType);
        }
        this.queryForm.sort = sort;
        this.queryDetail();
    }

    /**
     * 表头筛选
     */
    handleFilter(obj) {
        this.queryForm.paging.currentPage = 1;
        this.resetForm();
        let filterList = obj.filterList;
        if (filterList.length) {
            filterList.forEach(ele => {
                let property = ele.property;
                if (property == 'monitorResultType' || property == 'dateChangeType') {
                    this.queryForm[ele.property] = ele.values;
                } else {
                    this.queryForm[ele.property] = ele?.datas[0] || '';
                }
            });
        }
        this.queryDetail();
    }

    // 清空表头筛选条件
    resetForm() {
        this.queryForm.dataSource = '';
        this.queryForm.tableName = '';
        this.queryForm.logInfo = '';
        this.queryForm.monitorResultType = [];
        this.queryForm.dateChangeType = [];
        this.queryForm.primaryKeys = '';
    }

    // 获取排序字段
    handleSortField(name: string, order: string): string {
        let value = '';
        let field = this.sortObj[name];
        value = field + ' ' + order;
        if (name == 'receiveDate') {
            value = 'D_RECEIVE_DATE ' + order + ', D_RECEIVE_TIME ' + order;
        }
        return value;
    }

    // 分页回调
    pageChange() {
        this.queryForm.paging.currentPage = this.pages.currentPage;
        this.queryForm.paging.pageSize = this.pages.pageSize;
        this.queryDetail();
    }

    // 全屏图标点击事件
    handleFullScreen() {
        this.info.title = this.title;
        this.detailDialog = true;
    }

    // 处理日期变化
    handleDateChange(date: string) {
        if (date && date.length) {
            let startDate = this.date[0];
            let endDate = this.date[1];
            this.queryForm.startDate = startDate;
            this.queryForm.endDate = endDate;
            let days = moment(endDate, 'YYYYMMDD').diff(moment(startDate, 'YYYYMMDD'), 'days');
            let months = moment(endDate, 'YYYYMMDD').diff(moment(startDate, 'YYYYMMDD'), 'months');
            let years = moment(endDate, 'YYYYMMDD').diff(moment(startDate, 'YYYYMMDD'), 'years');

            if (days == 0) {
                // 开始结束日期为同一天
                this.unitData = [
                    { label: '时', value: 'hour' },
                    { label: '日', value: 'day' },
                ];
                this.queryForm.unit = 'hour';
            } else if (days > 0 && months == 0) {
                // 所选的日期区间超出一天小于一个月
                this.unitData = [
                    { label: '日', value: 'day' },
                    { label: '月', value: 'month' },
                ];
                this.queryForm.unit = 'day';
            } else if (months > 0 && years == 0) {
                // 所选的日期区间超出一个月小于一年
                this.unitData = [
                    { label: '月', value: 'month' },
                    { label: '年', value: 'year' },
                ];
                this.queryForm.unit = 'month';
            }
        } else {
            this.unitData = [
                { label: '时', value: '1' },
                { label: '日', value: '2' },
            ];
            this.queryForm.unit = 'hour';
        }
        this.getCdcTrend();
        this.getTableDistributeData();
        this.queryDetail();
    }

    handleUnitChange() {
        this.getCdcTrend();
        this.getTableDistributeData();
        this.queryDetail();
    }

    handleTableNamesChange(val) {
        // this.queryForm.tableNames = val;
        this.tableNames = val;
        this.queryDetail();
    }

    // 导出图表事件
    handleExportEchart() {
        // setTimeout(() => {
        //     let param = {
        //         pixelRatio: 2,
        //         backgroundColor: '#fff',
        //         excludeComponents: ['toolbox'],
        //     };
        //     let lineChartImgUrl = this.chartInstanceArr[0].getDataURL(param);
        //     let barChartImgUrl = this.chartInstanceArr[1].getDataURL(param);

        //     this.downloadImg(lineChartImgUrl, 'echartsButton');
        //     this.downloadImg(barChartImgUrl, 'echartsButton1');
        // }, 100);
        let param = {
            pixelRatio: 2,
            backgroundColor: '#fff',
            excludeComponents: ['toolbox'],
        };

        let lineChartImgUrl = this.chartInstanceArr[0].getDataURL(param);
        let barChartImgUrl = this.chartInstanceArr[1].getDataURL(param);

        let chart1 = this.convertBase64UrlToBlob(lineChartImgUrl);
        let chart2 = this.convertBase64UrlToBlob(barChartImgUrl);
        let formData = new FormData();
        for (const key in this.queryForm) {
            if (key !== 'paging') {
                formData.append(key, this.queryForm[key]);
            }
        }
        formData.append('currentPage', this.queryForm.paging.currentPage);
        formData.append('pageSize', this.queryForm.paging.pageSize);
        formData.append('files', chart1);
        formData.append('files', chart2);

        downLoadFileFormData({
            url: 'monitorCdc/trend/export',
            method: 'post',
            data: formData,
            loading: true,
            loadingMsg: '正在准备导出，请稍后··· ···',
        });
    }

    /*
     * 将base64转换成可用formdata提交的文件
     * @param {String} urlData base64的url
     */
    convertBase64UrlToBlob(urlData) {
        // 去掉url的头，并转换为byte
        var bytes = window.atob(urlData.split(',')[1]);
        // 处理异常,将ascii码小于0的转换为大于0
        var ab = new ArrayBuffer(bytes.length);
        var ia = new Uint8Array(ab);
        for (var i = 0; i < bytes.length; i++) {
            ia[i] = bytes.charCodeAt(i);
        }
        return new Blob([ab], { type: 'image/png' });
    }

    getStyle(val: string, value: string) {
        let color = '';
        if (val == 'monitorResultType') {
            color = value == '0' ? 'green' : value == '1' ? 'red' : '';
        }
        return { color: color };
    }

    getCellStyle({ column }) {
        let value = 'text-align:left';
        let obj = this.tableDetailMsg.title.find(item => item.val == column.property);

        if (obj) {
            value = 'text-align: ' + (obj.align || 'left');
        }
        return value;
    }

    closeDialog() {
        this.detailDialog = false;
    }
    beforeDestroy() {
        if (this.Timer) {
            clearInterval(this.Timer);
            this.Timer = null;
        }
    }

    destroyed() {
        window.removeEventListener('resize', this.screenAdapter);
    }
}
</script>

<style lang="scss" scoped>
@import '../../assets/style/serve-execution-monitor.scss';

#cdc-run-monitor {
    width: 100%;
    height: 100%;
    min-width: 1400px;

    .head {
        width: 100%;
        height: 60px;
        background-image: url('./images/title.png');
        background-size: 100%;

        .title {
            font-size: 24px;
            font-weight: 600;
            color: #107fff;
            line-height: 33px;
            letter-spacing: 20px;
            text-align: center;
            height: 100%;
            line-height: 60px;
        }
    }

    .content {
        padding: 0 10px 5px 10px;
        // background-color: #c9e5fd;
        .title {
            position: absolute;
            height: 25px;
            line-height: 25px;
            overflow: hidden;

            > span {
                padding-left: 25px;
                font-size: 16px;
                font-weight: bold;
            }
        }
        .title-right {
            // z-index: 10;
            display: flex;
            align-items: center;
            position: absolute;
            right: 1%;
            > i {
                font-size: 20px;
                font-weight: bold;
                padding: 0 5px;
                cursor: pointer;
            }

            i:hover {
                color: #107fff;
            }
            .total-num {
                margin-right: 20px;
                color: #fff;
                background-color: #578bec;
                padding: 5px 15px;
                font-size: 14px;
                background: url('./images/item-monitor-total.png');
                background-size: 100% 30px;
                background-repeat: no-repeat;
            }
            .export-button {
                margin: 0 10px;
                z-index: 10;
            }
            .el-button {
                border-radius: 9px;
                padding-top: 6px;
                padding-bottom: 6px;
            }
        }

        /deep/ .el-card {
            height: 100%;
        }

        /deep/ .el-card__body {
            padding: 10px;
            height: 100%;
            position: relative;
        }
        /deep/ .el-range-separator {
            width: 10% !important;
        }
    }

    .status-box {
        min-height: 130px;
        height: 15vh;
    }
    .trend-box {
        height: 20vh;
        min-height: 200px;
    }
    .table-distribution-box {
        height: 18vh;
        min-height: 180px;
    }
    .detail-box {
        height: 35vh;
        .table-box {
            margin-top: 35px;
            height: calc(100% - 30px);
            .table {
                height: calc(100% - 50px);
            }
        }
    }
    .flow-path-img {
        display: flex;
        height: calc(100% - 10px);
        padding: 0 50px;
        font-weight: bolder;
        min-width: 1350px;
        margin-top: 10px;

        .flex-1 {
            flex: 1;
            position: relative;
        }

        .flex-2 {
            flex: 2;
            display: flex;
            flex-direction: column;
        }

        .flex-3 {
            flex: 3;
        }

        .flex-row-100 {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;

            > span {
                padding-left: 20px;
                font-size: 12px;
                font-weight: 700;
                color: rgba(0, 0, 0, 0.65);
            }
        }

        .gif-size {
            width: 65px;
            height: 65px;
        }
        .line,
        .line-err {
            position: absolute;
            border-top: 2px solid rgba(0, 233, 255, 0.3);
            width: 410px;
            height: 100px;
            top: 40px;
            left: -125px;
        }

        .line-err {
            border-top: 2px solid #eee !important;
        }

        .arrows2 {
            width: 50px;
            height: 30px;
            position: relative;
            top: -16.5px;
            left: -30px;
        }

        .con {
            animation: fadenum 2.5s infinite;
        }

        @keyframes fadenum {
            100% {
                transform: translateX(360px);
            }
        }
    }
    /deep/ .el-select__tags {
        flex-wrap: nowrap;
    }

    /deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light {
        display: flex;
        align-items: center;
        .el-select__tags-text {
            display: inline-block;
            max-width: 80px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}
.test {
    max-height: 200px;
    overflow-y: auto;
}
.atooltip {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
//加上这个样式就解决了
.focusing {
    display: none;
}
</style>
<style>
.vxe-table--tooltip-wrapper .vxe-table--tooltip-content {
    max-height: 200px;
    overflow: auto;
    z-index: 2200;
}
.el-tooltip__popper {
    /* margin: 5px !important; */
}
.el-tooltip__popper.is-dark {
    /* max-height: 200px !important; */
    /* overflow-y: auto !important; */
    /* overflow-x: hidden; */
    /* max-width: 400px; */
    max-width: 400px;
    /* line-height: 120%; */
}

.monitor-tooltip {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: rgba(0, 0, 0, 0.65);
    border-width: 0px;
    padding: 5px 10px;
}

.monitor-tooltip .popper__arrow {
    display: none;
}
</style>
